<template>
	<view class="examine-content">
		<view class="top-bg">
			<view class="bg-img">
				<image :src="imageValue1">
				</image>
			</view>
			<view class="bg-title" v-if="user.status == 0">
				{{t('examine.review')}}...
			</view>
			<view class="bg-title" v-if="user.status == 1">
				{{t('examine.Fail')}}...
			</view>
			<view class="bg-title" v-if="user.status == 2">
				{{t('examine.Realname')}}
			</view>
			<view class="examine-error" v-if="user.status == 1">
				{{t('examine.reason')}}：{{t('examine.reasonText')}}
			</view>
		</view>
		<view class="cell-main">
			<u-cell-group>
				<u-cell :title="t('user.cardUserName')">
					<template #value>
						<image class="protection-icon" :src="imageValue2">
						</image>
						<text class="u-slot-value">{{t('examine.Information')}}</text>
					</template>
				</u-cell>
				<u-cell :title="t('user.IDcardNum')" :value="user.id_no"></u-cell>
			</u-cell-group>
		</view>
		<view class="back-btn" v-if="user.status == 0 || user.status == 2">
			<text @click="handleBack">{{t('examine.home')}}</text>
		</view>
		<view class="back-btn" v-if="user.status == 1">
			<text @click="goNameForm">{{t('examine.Recertification')}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getUcAuth
	} from '@/api/realName/realName.js'
	const state = reactive({});
	const user = ref({})
	const imageValue1 = '../../../static/imgs/loadingBlue.png'
	const imageValue2 = '../../../static/imgs/protection-blue.png'
	const checked = reactive(true);
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	show()
uni.setNavigationBarTitle({
			title: t('user.realName')
		});
	function show() {
		getUcAuth().then(res => {
			console.log(res)
			user.value = res.data
		})
	}

	function handleBack() {
		uni.switchTab({
			url: '/pages/home/home'
		})
	}
	function goNameForm(){
		uni.navigateTo({
			url:'/pages/user/real-name-authentication/real-name-form'
		})
	}
</script>

<style scoped lang="less">
	page {
		background-color: #fff;
	}

	.examine-content {

		&:before {
			content: '';
			background-color: #f2f4f7;
			display: inline-block;
			width: 100%;
			height: 16rpx;
		}
	}

	.top-bg {
		width: 100%;
		height: 596rpx;
		position: relative;
		// border-bottom: 1rpx solid #eaebec;

		.bg-img {
			position: absolute;
			top: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 450rpx;
			height: 292rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.bg-title {
			position: absolute;
			left: 50%;
			bottom: 160rpx;
			transform: translateX(-50%);
		}

		.examine-error {
			position: absolute;
			left: 50%;
			bottom: 112rpx;
			transform: translateX(-50%);
			color: #d43030;
			font-size: 24rpx
		}
	}

	.cell-main {
		padding: 0 32rpx;

		.protection-icon {
			width: 72rpx;
			height: 72rpx;
		}
	}

	.back-btn {
		position: fixed;
		bottom: 166rpx;
		width: 100%;
		color: #476ffe;
		text-align: center;
	}

	::v-deep .u-cell__body {
		padding: 27rpx 15rpx;
	}
</style>